<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
		<style>
			/*通用选择器：通用效果   盒模型：内外边距*/
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 300px;
				height: 300px;
				margin: 200px auto;
				/*视觉属性：  数值px; 拉开距离*/
				perspective: 3000px;
				bor der:1px solid red ;
			}
			/*2.魔方整体：①宽高②指定3D坐标轴 具备X,Y,Z 轴*/
			.box{
				width: 300px;
				height: 300px;
				/*3D效果层 魔方上 指定3D坐标轴 具备 X,Y,Z轴*/
				transform-style:preserve-3d;
				
				transform: rotateX(45deg) rotateY(45deg);
				animation: mofang 10s linear infinite;
			}
			@keyframes mofang{
				0%{
					transform: rotateX(45deg) rotateY(45deg);
				}
				70%{
					transform: rotateX(180deg) rotateY(180deg);
				}
				100%{
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			/*3.六个面，公共属性：设定宽高，绝对定位*/
			.page{
				width: 300px;
				height: 300px;
				/*绝对定位：6个面定位到一个点，定坐标轴，6个面所有坐标轴*/
				position: absolute;
				background-size: cover;   /* 关键设置 */
				background-position: center;
				background-repeat: no-repeat;
			}
			/*3.六个面添加6个颜色*/
			.page_top{
				background-color:#e4393c ;
				/*顶部平移150px 向上*/
				transform: translateZ(150px);
				background-image: url(img/33.png);
			}
			
			.page_bottomm{
				background-color:#ffff00 ;
				/**/
				transform: translateZ(-150px) ;
				background-image: url(img/44.png);
			}
			.page_left{
				background-color:#0000ff ;
				/*X轴 向左平移 -150px 按照Y轴 旋转 90deg*/
				transform: translateX(-150px) rotateY(90deg);
				background-image: url(img/55.png);
			}
			.page_right{
				background-color:#00ffee ;
				/*X轴 向右平移 150px 按照Y轴 旋转 90deg*/
				transform: translateX(150px) rotateY(90deg);
				background-image: url(img/66.png);
			}
			
			.page_before{
				background-color:#dc14ff ;
				/*Y轴 向前平移 150px 按照X轴 旋转 90deg*/
				transform: translateY(150px) rotateX(90deg);
				background-image: url(img/77.jpg);
			}
			
			.page_after{
				background-color: #eeaa55;
				
				transform: translateY(-150px) rotateX(90deg);
				background-image: url(img/88.jpg);
			}
		</style>
	</head>
	<body>
		<!--3D魔方结构  1.容器：看3D效果 2.魔方整体 3.6个面-->
		<div class="container">
			<div class="box">
			<!-- 6个面特点：①6个面宽高一致 ②颜色不一致
			使用类选择器：多别名方式解决上述问题-->
		    <div class="page page_top"></div>
			<div class="page page_bottomm"></div>
			<div class="page page_left"></div>
			<div class="page page_right"></div>
			<div class="page page_before"></div>
			<div class="page page_after"></div>
		</div>
		<audio src="img/111.mp3" autoplay></audio>
	</body>
</html>